<script lang="ts" setup>
import { ref } from "vue";
import {toast} from "../../components/popup/popup"
import {goBack,goNews,goHome} from "../../tools/go"
import {getRouteParams} from "../../tools/go"
import {getNewsDe, getNews} from "../../api/home/home"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {baseUrl} from "../../api/http";

const newsImage = ref("../../src/static/logo.png");

const newsDe = ref({
  id: 10,
  newsTitle: "",
  newsImg: "",
  ossId: 13,
  serverPath: "",
  newsContent: "",
  newsAuthor: "",
  newsTime: "",
  updateTime: "",
  status: 2
})

const commentPopup = ref();
const commentText = ref("");
const isLiked = ref(false);
const isCollected = ref(false);
const likeCount = ref(666);

const relatedNews = ref([
  {
    title: "全球科技巨头竞相布局AI芯片研发",
    image: "../../src/static/logo.png",
    views: "5,432",
    time: "2小时前",
  },
  {
    title: "多模态AI在医疗诊断领域取得突破性进展",
    image: "../../src/static/logo.png",
    views: "3,567",
    time: "4小时前",
  },
]);

const comments = ref([
]);



const handleShare = () => {
  toast("因隐私设置，该新闻无法被分享", "error")
};

const previewImage = () => {
  //@ts-ignore
  uni.previewImage({
    urls: [newsImage.value],
  });
};

const showCommentModal = () => {
  commentPopup.value.open();
};

const hideCommentModal = () => {
  commentPopup.value.close();
};

const submitComment = () => {
  if (!commentText.value.trim()) {
    toast("评论不能为空", "none")
    return;
  }

  comments.value.unshift({
    username: "我",
    avatar:
        "https://public.readdy.ai/ai/img_res/945ddd5b3669ce382702a4b0a5962b70.jpg",
    content: commentText.value,
    time: "刚刚",
    likes: 0,
    isLiked: false,
  });

  commentText.value = "";
  hideCommentModal();
  toast("评论成功", "success")
};

const toggleLike = () => {
  isLiked.value = !isLiked.value;
  likeCount.value += isLiked.value ? 1 : -1;
};

const toggleCollect = () => {
  isCollected.value = !isCollected.value;
  toast(isCollected.value ? "已收藏" : "取消收藏", "success")
};

const likeComment = (index: number) => {
  const comment = comments.value[index];
  comment.isLiked = !comment.isLiked;
  comment.likes += comment.isLiked ? 1 : -1;
};

const replyComment = (index: number) => {
  showCommentModal();
  commentText.value = `回复 @${comments.value[index].username}：`;
};

const goToNews = (news: any) => {
  goNews(news.newsId)
};

const newsPage = {
  page: 1,
  size: 10
}

const init = () => {

  getNewsDe(getRouteParams("id")).then(res => {
      newsDe.value = res.data
      newsImage.value = baseUrl + res.data.newsImg
  })
  getNews(newsPage.page, newsPage.size).then(res => {
    relatedNews.value = res.data.records
  })

}

init()

</script>
<template>
  <view class="back">


  <view class="news-detail">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons class="back-icon" type="back" size="24" @click="goHome" />
      <text class="nav-title">新闻详情</text>
      <uni-icons
          class="share-icon"
          type="redo"
          size="24"
          @click="handleShare"
      />
    </view>

    <!-- 滚动区域 -->
    <scroll-view class="scroll-container" scroll-y>
      <!-- 新闻头部信息 -->
      <view class="news-header">
        <text class="news-title">{{newsDe.newsTitle}}</text>
        <view class="news-meta">
          <text class="source">{{newsDe.newsAuthor}}</text>
          <text class="dot">·</text>
          <text class="time">{{newsDe.newsTime}}</text>
          <text class="dot">·</text>
<!--          <text class="views">阅读 12,345</text>-->
        </view>
      </view>

      <!-- 新闻内容 -->
      <view class="news-content">
        <image
            class="content-image"
            :src="baseUrl + newsDe.newsImg"
            mode="widthFix"
            @click="previewImage"
        />
        <view class="content-text">
          <text class="paragraph"
          >{{newsDe.newsContent}}</text
          >

        </view>
      </view>

      <!-- 相关推荐 -->
      <view class="related-news">
        <view class="section-title">相关推荐</view>
        <view class="news-list">
          <view
              v-for="(item, index) in relatedNews"
              :key="index"
              class="news-item"
              @click="goToNews(item)"
          >
            <image class="item-image" :src="baseUrl + item.newsImg" mode="aspectFill" />
            <view class="item-info">
              <text class="item-title">{{ item.newsTitle }}</text>
              <view class="item-meta">
<!--                <text class="item-views">{{ item.views }}阅读</text>-->
                <text class="item-time">{{ item.newsPublicTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 评论区 -->
      <view class="comments-section">
        <view class="section-title">评论区 ({{comments.length}})</view>
        <view class="comments-list">
          <view
              v-for="(comment, index) in comments"
              :key="index"
              class="comment-item"
          >
            <image
                class="user-avatar"
                :src="comment.avatar"
                mode="aspectFill"
            />
            <view class="comment-content">
              <text class="user-name">{{ comment.username }}</text>
              <text class="comment-text">{{ comment.content }}</text>
              <view class="comment-footer">
                <text class="comment-time">{{ comment.time }}</text>
                <view class="comment-actions">
                  <view class="like-btn" @click="likeComment(index)">
                    <uni-icons
                        :type="comment.isLiked ? 'heart-filled' : 'heart'"
                        size="16"
                        :color="comment.isLiked ? '#ff5a5f' : '#999'"
                    />
                    <text
                        :class="['like-count', comment.isLiked ? 'liked' : '']"
                    >{{ comment.likes }}</text
                    >
                  </view>
                  <view class="reply-btn" @click="replyComment(index)">
                    <uni-icons type="chat" size="16" color="#999" />
                    <text>回复</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="comment-input" @click="showCommentModal">
        <text>写下你的评论...</text>
      </view>
      <view class="action-buttons">
        <view class="action-btn" @click="toggleLike">
          <uni-icons
              :type="isLiked ? 'heart-filled' : 'heart'"
              size="24"
              :color="isLiked ? '#ff5a5f' : '#999'"
          />
          <text :class="['action-text', isLiked ? 'liked' : '']"
          >{{ likeCount }}</text
          >
        </view>
        <view class="action-btn" @click="toggleCollect">
          <uni-icons
              :type="isCollected ? 'star-filled' : 'star'"
              size="24"
              :color="isCollected ? '#ffd700' : '#999'"
          />
          <text :class="['action-text', isCollected ? 'collected' : '']"
          >收藏</text
          >
        </view>
        <view class="action-btn" @click="handleShare">
          <uni-icons type="redo" size="24" color="#999" />
          <text class="action-text">分享</text>
        </view>
      </view>
    </view>

    <!-- 评论弹窗 -->
    <uni-popup ref="commentPopup" type="bottom">
      <view class="comment-modal">
        <view class="modal-header">
          <text>写评论</text>
          <uni-icons type="close" size="24" @click="hideCommentModal" />
        </view>
        <textarea
            v-model="commentText"
            class="comment-textarea"
            placeholder="写下你的评论..."
        />
        <button class="submit-btn" @click="submitComment">发布</button>
      </view>
    </uni-popup>
  </view>
</view>
</template>



<style scoped lang="scss">
@use "../../static/css/main";
.back{
  @include main.useTheme() {
page {
  height: 100%;
}
body::-webkit-scrollbar {
   display: none;
}
.news-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: main.getVal('primary_bg_color');
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1px solid main.getVal('primary_border_color');
  background-color: main.getVal('primary_bg_color');
  flex-shrink: 0;
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: main.getVal('primary_text_color');
}

.scroll-container {
  flex: 1;
  overflow: auto;
}

.news-header {
  padding: 32rpx;
}

.news-title {
  font-size: 20px;
  font-weight: bold;
  color: main.getVal('primary_text_color');
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: main.getVal('two_lv_text_color');
}

.dot {
  margin: 0 10rpx;
}

.news-content {
  padding: 0 32rpx;
}

.content-image {
  width: 100%;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
}

.paragraph {
  font-size: 15px;
  color: main.getVal('one_lv_text_color');
  line-height: 1.6;
  margin-bottom: 24rpx;
  text-align: justify;
  display: block;
}

.related-news {
  padding: 32rpx;
  border-top: 16rpx solid main.getVal('primary_border_color');
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 24rpx;
}

.news-item {
  display: flex;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 1px solid main.getVal('primary_border_color');
}

.item-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 14px;
  color: main.getVal('one_lv_text_color');
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: main.getVal('other_lv_text_color');
}

.item-time {
  margin-left: 16rpx;
}

.comments-section {
  padding: 32rpx;
  border-top: 16rpx solid main.getVal('primary_border_color');
  padding-bottom: 120rpx;
}

.comment-item {
  display: flex;
  margin-bottom: 32rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 24rpx;
}

.comment-content {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: main.getVal('primary_text_color')!important;
  margin-bottom: 8rpx;
  display: block;
}

.comment-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 16rpx;
  display: block;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-time {
  font-size: 12px;
  color: #999999;
}

.comment-actions {
  display: flex;
  align-items: center;
}

.like-btn,
.reply-btn {
  display: flex;
  align-items: center;
  margin-left: 32rpx;
}

.like-count {
  font-size: 12px;
  color: #999999;
  margin-left: 8rpx;
}

.like-count.liked {
  color: #ff5a5f;
}

.reply-btn text {
  font-size: 12px;
  color: main.getVal('two_lv_text_color')!important;
  margin-left: 8rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: main.getVal('one_lv_bg_color');
  border-top: 1px solid main.getVal('primary_border_color');
  display: flex;
  align-items: center;
  padding: 0 32rpx;
}

.comment-input {
  flex: 1;
  height: 64rpx;
  background-color: main.getVal('two_lv_bg_color');
  color: main.getVal('other_lv_text_color');
  border-radius: 32rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
}

.comment-input text {
  font-size: 14px;
  color: #999999;
}

.action-buttons {
  display: flex;
  align-items: center;
  margin-left: 32rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 48rpx;
}

.action-text {
  font-size: 12px;
  color: #999999;
  margin-top: 4rpx;
}

.action-text.liked {
  color: #ff5a5f;
}

.action-text.collected {
  color: #ffd700;
}

.comment-modal {
  background-color: main.getVal('two_lv_bg_color');
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.modal-header text {
  font-size: 16px;
  font-weight: 500;
  color: main.getVal('primary_text_color');
}

.comment-textarea {
  width: 100%;
  height: 200rpx;
  background-color: main.getVal('one_lv_bg_color');
  color: main.getVal('primary_text_color');
  border-radius: 16rpx;
  padding: 24rpx;
  font-size: 14px;
  margin-bottom: 24rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  background-color: main.getVal('pri_color');
  border-radius: 40rpx;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  
}}
</style>
